{extend name="layout_container" /}


{block name="main"}

<el-row :gutter="10">
    <el-col class="order-detail" :span="16">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>订单信息</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <label class="order-label">订单编号：</label> {{data.sn}}
                </el-col>
                <el-col :span="8">
                    <label class="order-label">订单状态：</label> {{data.status_text}}
                </el-col>
                <el-col :span="8">
                    <label class="order-label">支付金额：</label> {{data.money}}元
                </el-col>
                <el-col :span="8">
                    <label class="order-label">商品总价：</label> {{data.price_origin}}元
                </el-col>
                <el-col :span="8">
                    <label class="order-label">优惠金额：</label> {{data.discount_money}}元
                </el-col>
                <el-col :span="8">
                    <label class="order-label">运费：</label> {{data.logistics_money}}元
                </el-col>
                <el-col :span="8">
                    <label class="order-label">下单时间：</label> {{data.create_time}}
                </el-col>

                <el-col :span="16">
                    <label class="order-label">用户备注：</label> {{data.user_desc}}
                </el-col>
            </el-row>
        </el-card>

        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>商品信息</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <label class="order-label">商品名称：</label> {{data.goods_info.title}} / ID:{{data.goods_id}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">商品规格：</label> {{data.goods_spec}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">销售门店：</label> {{data.store_name}} / ID:{{data.store_id}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">销售店员：</label> {{data.clerk_name}} / ID:{{data.store_clerk_id}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">商品价格：</label> {{data.goods_info.price}}元
                </el-col>
                <el-col :span="12">
                    <label class="order-label">购买数量：</label> {{data.nums}}
                </el-col>
            </el-row>
        </el-card>

        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>买家信息</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <label class="order-label">用户UID：</label> {{data.uid}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">用户昵称：</label> {{data.user_nickname}}
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <label class="order-label">收货人：</label> {{data.address_info.linkman}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">联系电话：</label> {{data.address_info.phone}}
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <label class="order-label">收货地址：</label> {{data.address_info.address}}
                </el-col>
            </el-row>

        </el-card>

        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>物流信息</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <label class="order-label">物流公司：</label> {{data.logistics_company_text}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">快递单号：</label> {{data.logistics_sn}}
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <label class="order-label">发货时间：</label> {{data.logistics_time}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">物流信息：</label> <el-link type="primary" v-if="data.logistics_sn" @click="dialogTableVisible = true">查看<i class="el-icon-view el-icon--right"></i></el-link>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>支付信息</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <label class="order-label">支付方式：</label> {{data.pay_way_text}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">支付流水号：</label> {{data.pay_info.pay_no}}
                </el-col>
                <el-col :span="12">
                    <label class="order-label">支付时间：</label> {{data.pay_time}}
                </el-col>
                <el-col :span="24">
                    <label class="order-label">支付参数：</label>
                    <span v-html="data.pay_info.pay_result"></span>
                </el-col>

            </el-row>
        </el-card>

        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>订单评价</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="manageEvaluate">管理</el-button>
            </div>
            <el-table
                    :data="evaluates"
                    style="width: 100%">
                <el-table-column
                        prop="user.type_text"
                        label="角色"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="user.name"
                        label="评价人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="rate"
                        label="评分"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="内容"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="create_time"
                        label="时间"
                        width="180">
                </el-table-column>
            </el-table>
        </el-card>

    </el-col>
    <el-col :span="8" class="mt15">
        <el-row style="margin-bottom: 15px" v-if="data.admin_ops.length > 0">
            <el-button type="primary" v-for="(item, index) in data.admin_ops" :key="index" @click="doOps(item)">{{item.label}}</el-button>
        </el-row>

        <el-card class="box-card" style="margin-top: 0" shadow="hover">
            <div slot="header" class="clearfix">
                <label class="order-label">订单日志</label>
            </div>
            <el-timeline :reverse="reverse">
                <el-timeline-item
                        icon="el-icon-time"
                        v-for="(log, index) in data.logs_list"
                        size="large"
                        :key="index"
                        :timestamp="log.create_time">
                    <el-avatar size="small" :src="log.user.avatar" v-if="log.user.avatar" style="vertical-align:middle"></el-avatar>
                    <span style="color: #909399" v-if="log.user.name">{{log.user.name}}:</span> {{log.content}}
                </el-timeline-item>
            </el-timeline>
        </el-card>
    </el-col>


</el-row>

<el-dialog title="快递信息" :visible.sync="dialogTableVisible" width="500px">
    <iframe src="{$kdUrl}" frameborder="0" style="width: 100%; min-height: 600px;"></iframe>
</el-dialog>

<el-dialog title="发货" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="快递公司" :label-width="formLabelWidth" prop="logistics_company_id">
            <el-select v-model="form.logistics_company_id" filterable placeholder="请选择快递公司">
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in logisticsCompany" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="快递单号" :label-width="formLabelWidth" prop="logistics_sn">
            <el-input v-model="form.logistics_sn" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addKd">确 定</el-button>
    </div>
</el-dialog>

<el-dialog title="评价" :visible.sync="dialogeValuate">
    <el-form :model="formValuate" :rules="rulesValuate" ref="formValuate">
        <el-form-item label="评分" :label-width="formLabelWidth" prop="rate">
            <el-rate v-model="formValuate.rate"></el-rate>
        </el-form-item>
        <el-form-item label="评价" :label-width="formLabelWidth" prop="content">
            <el-input type="textarea" :rows="2" v-model="formValuate.content" placeholder="请输入评价"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
            <el-upload
                ref="upload"
                action="{$urlUpload}"
                list-type="picture-card"
                :file-list="fileList"
                :multiple="true"
                :auto-upload="true">
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogeValuate = false">取 消</el-button>
        <el-button type="primary" @click="addValuate">确 定</el-button>
    </div>
</el-dialog>


<el-dialog :visible.sync="dialogImageVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

{/block}

{block name='style'}
<style>
    .box-card{
        margin-bottom: 15px;
    }
    .order-label{
        color: #999;
    }
    .el-card__header{
        padding: 10px 20px;
    }
    .order-detail .el-card__body{
        font-size: 14px;
    }
</style>
{/block}

{block name="script"}

<script>
    new Vue({
        el: '#app',
        template: "#appCnt",
        data: function () {
            return {
                formLabelWidth: '120px',
                logisticsCompany: [],
                form: {
                    logistics_company_id: '',
                    logistics_sn: ''
                },
                rules: {
                    logistics_company_id: [
                        {required: true, message: '请输入选择快递公司', trigger: 'blur'},
                    ],
                    logistics_sn: [
                        {required: true, message: '请输入快递单号', trigger: 'blur'}
                    ],
                },
                formValuate: {
                    rate: '',
                    content: '',
                    images: []
                },
                rulesValuate: {
                    rate: [
                        {required: true, message: '请选择分数', trigger: 'blur'},
                    ],
                    content: [
                        {required: true, message: '请输入评价', trigger: 'blur'}
                    ]
                },
                fileList: [],
                dialogImageUrl: '',
                dialogImageVisible: false,
                dialogTableVisible: false,
                dialogeValuate: false,
                dialogFormVisible: false,
                disabled: false,
                reverse: true,
                data: {$data|raw},
                evaluates: {$evaluates|raw}
            }
        },
        methods: {
            doOps (info) {
                console.log('点击' + info.label)
                this.$options.methods[info.op](info, this)
            },
            cancel (info, _this) {
                _this.$confirm('确定取消订单?', info.label, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.post('{$urlCancel}', function (rs) {
                        if (rs.code === 200) {
                            _this.$message.success({
                                type: 'success',
                                message: rs.msg,
                                duration: 800,
                                onClose: function () {
                                    window.location.reload()
                                }
                            });
                        } else {
                            _this.$message.error(rs.msg);
                        }
                    }, 'json')

                })
            },
            complete (info, _this) {
                _this.$prompt('请备注原因', info.label, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    $.post('{$urlComplete}', {reason: value}, function (rs) {
                        if (rs.code === 200) {
                            _this.$message.success({
                                type: 'success',
                                message: rs.msg,
                                duration: 800,
                                onClose: function () {
                                    window.location.reload()
                                }
                            });
                        } else {
                            _this.error(rs.msg);
                        }
                    }, 'json')
                })
            },
            refund (info, _this) {
                this.doRefund('pass', info, _this)
            },
            refund_refuse (info, _this) {
                this.doRefund('refuse', info, _this)
            },
            doRefund (audit, info, _this) {
                _this.$prompt('请备注处理信息', info.label, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    $.post('{$urlRefund}', {desc: value, audit: audit}, function (rs) {
                        if (rs.code === 200) {
                            _this.$message.success({
                                type: 'success',
                                message: rs.msg,
                                duration: 800,
                                onClose: function () {
                                    window.location.reload()
                                }
                            });
                        } else {
                            _this.error(rs.msg);
                        }
                    }, 'json')
                })
            },
            send (info, _this) {
                if (_this.logisticsCompany.length < 1) {
                    $.post('{$urlLogisticsCompany}', function (rs) {
                        if (rs.code === 200) {
                            _this.logisticsCompany = rs.data
                        }
                    })
                }
                _this.dialogFormVisible = true
            },
            addKd () {
                let _this = this
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        $.post('{$urlSend}', this.form, function (rs) {
                            if (rs.code === 200) {
                                _this.$message.success({
                                    type: 'success',
                                    message: rs.msg,
                                    duration: 800,
                                    onClose: function () {
                                        window.location.reload()
                                    }
                                });
                            } else {
                                _this.$message.error(rs.msg);
                            }
                        }, 'json')
                    } else {
                        _this.$message.error('请填写完整信息');
                        return false;
                    }
                });

            },
            evaluate (info, _this) {
                _this.dialogeValuate = true
            },
            addValuate () {
                let _this = this
                this.$refs['formValuate'].validate((valid) => {
                    if (valid) {
                        this.$refs.upload.uploadFiles.forEach((item) => {
                            this.formValuate.images.push(item.response.data.filePath)
                        })

                        // this.formValuate.images = _this.fileList
                        $.post('{$urlEvaluate}', this.formValuate, function (rs) {
                            if (rs.code === 200) {
                                _this.$message.success({
                                    type: 'success',
                                    message: rs.msg,
                                    duration: 800,
                                    onClose: function () {
                                        // window.location.reload()
                                    }
                                });
                            } else {
                                _this.$message.error(rs.msg);
                            }
                        }, 'json')
                    } else {
                        _this.$message.error('请填写完整信息');
                        return false;
                    }
                });

            },
            manageEvaluate()
            {
                openMainUrl({
                    url: '{$manageEvaluateUrl}',
                    blank: true,
                    blankName: '订单评价'
                })
            }
        },
        created: function () {
        }
    })
</script>

{/block}